<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2023-06-27 16:30:58
 * @LastEditors: jhw
 * @LastEditTime: 2023-06-28 11:03:01
-->
<template>
  <div class="checkerboardItem"></div>
</template>

<script setup>
const props = defineProps({
  checkerboardItemInfo: {
    type: Number,
    default: 0,
  },
});
import { toRefs, ref, watchEffect, onMounted } from 'vue';
onMounted(() => {
  // console.log(props.checkerboardItemInfo);
});
let color = ref('white');
watchEffect(() => {
  switch (props.checkerboardItemInfo) {
    case 0:
      color.value = 'white';
      break;
    case 1:
      color.value = 'red';
      break;
  }
});
</script>

<style lang="scss" scoped>
.checkerboardItem {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  background: v-bind(color);

  // background: #fff;
}
</style>
